<template>
  <div>
    <div class="xiaoqu">
      <el-row>
        <el-col :span="6">
          用户名称：<el-input
            style="width: 200px; height: 38px"
            clearable
            v-model="title"
          />
        </el-col>
        <el-col :span="2">
          <el-button
            type="primary"
            style="height: 38px; width: 70px"
            @click="search"
            >搜索</el-button
          >
        </el-col>
      </el-row>
      <el-row class="col" style="margin-top: 20px">
        <el-button type="primary"  @click="openInsertDialog()">增加用户</el-button>
      </el-row>
      <el-row class="col" style="margin-top: 20px">
        <el-table
          :data="useriList"
          style="width: 100%; text-align: center"
          :header-cell-style="{
            backgroundColor: '#1890ff',
            color: 'white',
            textAlign: 'center',
            height: '50px',
          }"
          :cell-style="{ textAlign: 'center' }"
        >
          <el-table-column prop="id" label="ID" />
          <el-table-column prop="username" label="用户名" />
          <el-table-column prop="password" label="密码" />
          <el-table-column prop="nickname" label="昵称" />
          <el-table-column prop="phone" label="电话" />w
          <el-table-column prop="point" label="积分" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button type="text" class="text" @click="openUpdateDialog(scope.row)">修改用户</el-button>
              <el-button
                type="text"
                class="text"
                @click="openDeleteDialog(scope.row)"
                >删除用户</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <UserOperationPopup ref="operationPopup" />
      </el-row>
    </div>
    <!-- 定义弹出框 -->
    <el-dialog v-model="deleteDialogVisible" title="确认删除" width="30%">
      <p>确定要删除该用户吗？此操作不可恢复。</p>
      <template #footer>
        <span>
          <el-button @click="cancelDelete">取消</el-button>
          <el-button type="primary" @click="deleteUser()">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog v-model="InsertDialogVisible" title="新增用户">
      <XinZeng @XinZengUserData="handleUserData"></XinZeng>
      <template #footer>
        <el-button class="text" @click="cancelInsert">取消</el-button>
        <el-button type="primary" @click="InsertUser()">保存</el-button>
      </template>
    </el-dialog>
    <el-dialog v-model="UpDateDialogVisible" title="编辑用户" >
      <UpDate :key="child.id" @updateUserData="handleUsersData" :data="child"></UpDate>
      <template #footer>
        <el-button class="text" @click="cancelupdate">取消</el-button>
        <el-button type="primary" @click="updateUser()">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>
  
<script setup>
import { ref, onMounted } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";
import XinZeng from "./ZuJian/XinZeng.vue";
import UpDate from "./ZuJian/UpDate.vue";

const useriList = ref([]);
const title = ref("");
const qs = require("qs");
const id = ref("");
const user=ref([]);
const users=ref([]);
const child=ref([]);

// 定义弹出框组件

// 删除用户对话框的显示状态
const deleteDialogVisible = ref(false);
// 打开删除用户对话框
const openDeleteDialog = (data) => {
  deleteDialogVisible.value = true;
  id.value = data.id;
};
// 取消删除操作
const cancelDelete = () => {
  deleteDialogVisible.value = false;
};
// 删除用户
const deleteUser = async () => {
  deleteDialogVisible.value = false;
  console.log(`删除用户：${id.value}`);
  try {
    // 使用await等待axios.post请求完成并获取响应
    await axios.post(
      "http://localhost:8080/delete",
      qs.stringify({
        id: id.value,
      })
    );
    // 调用成功，则提示删除成功
    ElMessage({
      message: "删除成功",
      type: "success",
    });
    // 刷新页面
    sou();
  } catch (error) {
    console.error("获取区域数据时出现错误：", error);
  }
};


//从子组件接收数据
const handleUserData = (data) => {
  console.log('从子组件接收到的数据：', data);
  user.value=data;
};
// 新增用户对话框的显示状态
const InsertDialogVisible = ref(false);
// 打开新增用户对话框
const openInsertDialog = () => {
  InsertDialogVisible.value = true;
};
// 取消新增操作
const cancelInsert = () => {
  InsertDialogVisible.value = false;
};
// 新增用户
const InsertUser = async () => {
  InsertDialogVisible.value = false;
  console.log(`新增用户：${user.value}`);
  try {
    // 使用await等待axios.post请求完成并获取响应
    await axios.post(
      "http://localhost:8080/tianjia",
      qs.stringify({
        ...user.value,
      })
    );
    // 调用成功，则提示删除成功
    ElMessage({
      message: "新增成功",
      type: "success",
    });
    // 刷新页面
    sou();
  } catch (error) {
    console.error("获取区域数据时出现错误：", error);
  }
};

//从子组件接收数据
const handleUsersData = (data) => {
  console.log('从子组件接收到的数据：', data);
  users.value=data;
};
// 编辑用户对话框的显示状态
const UpDateDialogVisible = ref(false);
// 打开编辑用户对话框
const openUpdateDialog = (data) => {
  UpDateDialogVisible.value = true;
  child.value=data;
};
// 取消编辑操作
const cancelupdate = () => {
  UpDateDialogVisible.value = false;
};
// 更新用户
const updateUser = async () => {
  UpDateDialogVisible.value = false;
  console.log(`更新用户：${users.value}`);
  try {
    await axios.post(
      "http://localhost:8080/update",
      qs.stringify({
        ...users.value,
      })
    );
    // 调用成功，则提示更新成功
    ElMessage({
      message: "更新成功",
      type: "success",
    });
    sou();
  } catch (error) {
    console.error("获取区域数据时出现错误：", error);
  }
};

const search = async function () {
  await axios
    .post(
      "http://localhost:8080/search",
      qs.stringify({
        username: title.value,
      })
    )
    .then((response) => {
      useriList.value = response.data.data;
    })
    .catch((error) => {
      console.error("获取区域数据时出现错误：", error);
    });
};

const sou = async function(){
  axios
    .get("http://localhost:8080/users")
    .then((response) => {
      useriList.value = response.data.data;
    })
    .catch((error) => {
      console.error("获取区域数据时出现错误：", error);
    });
}

onMounted(() => {
  sou();
});
</script>
  
  <style lang="less" scoped>
</style>